<template>
  <footer>
    <div class="main">
      <router-view />
    </div>
    <div class="footer">
      <ul>
        <li>
          <router-link to="/home/index" active-class="active">
            <div class="iconfont">&#xe64f;</div>
            首页
          </router-link>
        </li>
        <li>
          <router-link to="/home/found" active-class="active">
            <div class="iconfont">&#xe8af;</div>
            发现
          </router-link>
        </li>
        <li>
          <router-link to="/home/news" active-class="active">
            <div class="iconfont">&#xe8bd;</div>
            消息
          </router-link>
        </li>
        <li>
          <router-link to="/home/mine/note" active-class="active">
            <div class="iconfont">&#xe601;</div>
            我的
          </router-link>
        </li>
      </ul>
    </div>
  </footer>
</template>
<script>
export default {
  name: "compFooter",
};
</script>
<style scoped lang="scss">
.footer {
  border-top: 1px #ccc solid;
  width: 100%;
  height: 80px;
  position: fixed;
  bottom: 0;
  left: 0;
  background:#fff;
  ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    li {
      flex-basis: 25%;
      text-align: center;
      font-size: 14px;
      position: relative;
      a {
        width: 100%;
        height: 100%;
        display: block;
        color: #3c3636;
        line-height: 120px;
        .iconfont {
          width: 50px;
          height: 40px;
          position: absolute;
          top: 5px;
          left: 50%;
          margin-left: -25px;
          font-size: 30px;
          line-height: 50px;
        }
      }
      .active {
        color: #FE2C28;
      }
    }
  }
}
</style>